<template>
  <div id="myFocusPage">
    <x-header title="全部订单" :right-options="{showMore: false}" @on-click-more="show = true"></x-header> 
    <tab v-model="index" :line-width=2 active-color='#fc378c' prevent-default @on-before-index-change="switchTabItem">
      <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2"  :key="index">{{item}}</tab-item>
    </tab>
    <swiper id="mySwiper" v-model="index" :show-dots="false" ref="mySwiper">
        <div class="wrap—order" v-for="(item, index) in orderListInfos"  :key="index">
            <div class="item—title"> <span>{{item.status}}</span><span style="float:right">订单号:{{item.orderId}}</span></div>
            <!-- <shop-cell :list="list"></shop-cell> -->
            <div v-for="(goodsitem, indexs) in item.goodsInfo"  :key="indexs">
              <div class="orserListWrap">
                  <div class="orderListImg"><img :src="getUrl(goodsitem.goods.product_thumb_image)" alt=""></div>
                  <div class="orderListDetail">
                    <div class="detailInfo">{{goodsitem.goods.goodsname}}<p>{{goodsitem.goods.keywords}}</p></div>
                    <div class="shopsColor"><span>￥{{goodsitem.goods.shop_price}}</span><span style="float:right;color:#f74c31">x{{goodsitem.buyNumber}}</span></div>
                  </div>
              </div>
        
            </div>
            <div class="item—title font-right">共<span class="shopsColor">{{item.totalNum}}</span>件商品  合计：<span class="shopsColor">￥{{item.totalMoney}}</span>（含运费<span class="shopsColor">{{item.totalFreightMoney}}</span>）</div>
            
            <div class="bottom-order" v-show="item.status=='已支付'">
                <flexbox>
                    <flexbox-item><div class="flex-demo first_order"></div></flexbox-item>
                    <flexbox-item><div class="flex-demo">删除订单</div></flexbox-item>
                    <flexbox-item><div class="flex-demo">查看物流</div></flexbox-item>
                    <flexbox-item><div class="flex-demo">去评价</div></flexbox-item>
                 </flexbox>
            </div>
              <div class="bottom-order" v-show="item.status=='未支付'">
                <flexbox>
                    <flexbox-item><div class="flex-demo first_order"></div></flexbox-item>
                    <flexbox-item><div class="flex-demo" @click="cancelOrder(item.orderId)">取消订单</div></flexbox-item>
                    <flexbox-item><div class="flex-demo">去付款</div></flexbox-item>
                 </flexbox>
            </div>
        </div>
    </swiper>
                <toast position="middle" v-model="messShow" type="text">{{message}}</toast>
  </div>
</template>



<script>
import {
  Tab,
  TabItem,
  Swiper,
  SwiperItem,
  XHeader,
  Flexbox,
  FlexboxItem,
  Toast
} from "vux";
import ShopCell from "../../components/toolComponent/shopCell.vue";
import $ from "jquery";
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";

const list = () => ["全部", "待付款", "待发货", "待收货", "待评价" , "已取消"];
export default {
  components: {
    ShopCell,
    XHeader,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Flexbox,
    FlexboxItem,
    Toast
  },
  data() {
    return {
      list: [],
      list2: list(),
      demo2: "商品",
      demoDisabled: "A",
      messShow:false,
      message:"",
      index: this.$route.params.index,
      all_order_list:[] , 
      orderListInfos: [],
      youhuiList: [
        {
          src: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            '<p><span>标题1</span><span style="float:right;color:#cc0010;font-size:18px">￥0</span></p>',
          desc: "<p>由各种物质组成的巨型球状天体，叫做星球。</p><p>星球有一定的形状，有自己的运行轨道。</p>",
          url: "/component/cell"
        }
      ]
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      this.$refs.mySwiper.xheight = "300px";
      var that = this;
      $(function() {
        var windowHeight = $(window).height();
        var headerHeight = $(".vux-header").outerHeight();
        var tabHeight = $(".vux-tab").outerHeight();
        that.$refs.mySwiper.xheight =
          windowHeight - headerHeight - tabHeight + "px";
        $(".vux-swiper").css({ overflow: "scroll" });
      });
    });
  },
  methods: {
    switchTabItem(index) {
      this.$vux.loading.show({
        text: "loading"
      });
      var that = this;
      setTimeout(() => {
        that.$vux.loading.hide();
        that.$data.index = index;
        console.log( that.$data.index )
        if (index == 0) {
          
          that.$data.orderListInfos = that.$data.all_order_list
        }
        if (index == 1) {
          that.selectOrderByStatus(that , "未支付")
        }
        if (index == 2) {
          that.selectOrderByStatus(that , "待发货")
        }
        if (index == 3) {
          that.selectOrderByStatus(that , "已发货")
        }
        if (index == 4) {
          that.selectOrderByStatus(that , "待评价")
        }
        if (index == 5) {
          that.selectOrderByStatus(that , "已取消")
        }
        $(".vux-swiper").scrollTop(0);
      }, 500);
    },
    // 订单列表
    orderListReq() {
      var datas = qs.stringify({
        wxid: "654321"
      });
      axios
        .post(homeUrl() + "ordertableListJson/", datas, { emulateJSON: true })
        .then(
          result => {
            console.log(result);
            if (result.data.status == "ok") {
              this.orderListInfos = result.data.data;
              this.all_order_list = result.data.data;
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    // 购买数量
    buyNum(type) {
      // console.log(this.orderListInfos);
      var nums = 0;
      var prices = 0;
      for (var i = 0; i < this.orderListInfos.length; i++) {
        var orderInfoArr = this.orderListInfos[i].goodsInfo;
        for (var j = 0; j < orderInfoArr.length; j++) {
          nums += parseInt(orderInfoArr[j].buyNumber);
          prices += parseInt(orderInfoArr[j].goods.price);
        }
      }
      // console.log(prices);
      if (type == "num") {
        return nums;
      }
      if(type=="price"){
        return prices
      }
    },
    // 取消订单
    cancelOrder(orderId){
      console.log(orderId);
      var datas = qs.stringify({
        orderTableId: orderId
      });
      axios
        .post(homeUrl() + "cancalOrderByOrderId/", datas, { emulateJSON: true })
        .then(
          result => {
            console.log(result);
            if (result.data.status == "ok") {
             this.messShow=true;
             this.message="订单取消成功"
              this.orderListReq();
              
            }
          },
          error => {
            this.$vux.toast.text("网络请求失败....", "bottom");
            console.log(error);
          }
        );
    },
    getUrl(urls){
      var srcs = homeUrl()+urls;
      return srcs
    } , 
    // 根据状态 筛选订单
    selectOrderByStatus(that , status){
      that.$data.orderListInfos = []
      for (var i = 0; i < that.$data.all_order_list.length; i++) {
        if (that.$data.all_order_list[i].status == status) {
          that.$data.orderListInfos.push(that.$data.all_order_list[i])
        }
      }
    }
  },
  created() {
    this.orderListReq();
  }
};
</script>

<style lang="less" scoped>
@import "~vux/src/styles/1px.less";
@import "~vux/src/styles/center.less";

#myFocusPage .vux-slider {
  overflow: unset;
}

#myFocusPage #mySwiper .vux-swiper {
  overflow: unset;
}
.wrap—order {
  padding: 0.375rem;
  background: #ffffff;
  margin-bottom: 10px;
}
.item—title {
  height: 2.8125rem;
  line-height: 2.8125rem;
  border-bottom: 1px solid #ebebeb;
}
.font-right {
  text-align: right;
  font-size: 12px;
}
.tab-swiper {
  background-color: #fff;
  height: 100px;
}
.bottom-order {
  margin-top: 0.375rem;
}
.flex-demo {
  text-align: center;
  border-radius: 20px;
  background-clip: padding-box;
  height: 1.875rem;
  border: 1px solid #666;
  line-height: 1.875rem;
  
}
.first_order {
  display: none;
}
.orserListWrap {
  display: flex;
  // padding: 5px;
  border-bottom: 1px solid #ebebeb;
  padding-top: 10px;
  font-size: 14px;
}
.orderListImg {
  flex: 1;
  padding-right: 5px;
}
.orderListImg img {
  width: 100px;
  height: 100px;
}
.orderListDetail {
  flex: 3;
}
.detailInfo {
  margin-bottom: 15px;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.shopsColor {
  color: #f74c31;
}
</style>